import React from "react";
import { Input, Select, Tabs, Form } from "antd";

import styles from "./Pannel.less";

import udStyles from "./UserTaskDetail.less";

const { TabPane } = Tabs;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
class ServiceTaskDetail extends React.Component {
  state = {
    overrideid: "",
    activeKey: "1",
    showDiv:false,
    name: "",
    code: "",
    expression: "",
    requestBody:"",
    requestUrl:"",
    type: undefined,
    resultVariable: "",
    failedJobRetryTimeCycleValue: "",
  };

  componentDidMount() {
    const { selectedModel = {} } = this.props;
    const { properties = {} } = (selectedModel || {}).model || {};
    this.initFrom(properties);
  }

  componentWillReceiveProps(nextPops) {
    const { selectedModel = {}, form } = this.props;

    if (nextPops.selectedModel.id !== selectedModel.id) {
      const { properties = {} } = (nextPops.selectedModel || {}).model || {};
      this.initFrom(properties);
      form.resetFields();
    }
  }

  handleChange = (name, value, isEmpty = false) => {
    const obj = {};
    const newValue = value || "empty";
    obj[name] = isEmpty ? value : newValue;
    this.setState({
      ...obj,
    });
    this.setState({ code: value });
  };

  initFrom({ baseInfo, serviceConf }) {
    this.setState({
      name: baseInfo?.name,
      code: baseInfo?.code,
      expression: serviceConf?.expression,
      showDiv:serviceConf?.showDiv,
      requestBody:serviceConf?.requestBody,
      requestUrl:serviceConf?.requestUrl,
      type: serviceConf?.type,
      resultVariable: serviceConf?.resultVariable,
      failedJobRetryTimeCycleValue: serviceConf?.failedJobRetryTimeCycleValue,
    });
  }


  render() {
    const {
      overrideid,
      activeKey,
      showDiv,
      name,
      code = undefined,
      expression,
      requestBody,
      requestUrl,
      type,
      resultVariable,
      failedJobRetryTimeCycleValue,
    } = this.state;
    const {
      disable,
      handleChangeProperties: propsHandleChangeProperties,
      handleGraphChange,
      selectedModel,
    } = this.props;

    const {properties = {}} = (selectedModel || {}).model || {};
    const handleChangeProperties = (...args) => {
      propsHandleChangeProperties(...args);
      this.forceUpdate();
    };

    const serviceConf = {
      showDiv,
      expression,
      requestBody,
      requestUrl,
      type,
      resultVariable,
      failedJobRetryTimeCycleValue,
    };
    const overrideidVal =
      overrideid === "empty" ? "" : overrideid || properties.overrideid;
    return (
      <>
        <div className={styles.headTitle}>服务任务</div>
        <div
          className={`block-container ${styles.content} ${udStyles.container}`}
        >
          <Tabs
            activeKey={activeKey}
            onChange={key => this.setState({ activeKey: key })}
            size="small"
          >
            <TabPane tab="基础信息" key="1">
              {/* <div className={`${styles.content_item} ${styles.hq_item}`}> */}

              <div className={styles.content_item}>
                <span className={styles.item_label}>节点名称：</span>
                <Input
                  disabled={disable}
                  placeholder="请输入"
                  maxLength={30}
                  value={name || selectedModel?.label}
                  onChange={ev => this.setState({ name: ev.target.value })}
                  onBlur={ev => {
                    handleGraphChange("label", ev.target.value, false);
                    handleChangeProperties(
                      "baseInfo",
                      { name: ev.target.value, code },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
              <div className={styles.content_item}>
                <span className={styles.item_label}>节点标识：</span>
                <Input
                  disabled={disable}
                  maxLength={30}
                  placeholder="请输入"
                  value={overrideidVal}
                  onChange={ev =>  this.handleChange("overrideid", ev.target.value)}
                  onBlur={ev => {
                    handleChangeProperties(
                      "overrideid",
                      ev.target.value,
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                    handleChangeProperties(
                      "baseInfo",
                      {
                        name: name || selectedModel?.label,
                        code: ev.target.value,
                      },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
            </TabPane>
            <TabPane tab="服务配置" key="2">
              <div style={{ marginBottom: "12px" }}>
                <div style={{ marginBottom: "12px" }}>服务类型：</div>
                <Select
                  disabled={disable}
                  style={{ width: "100%" }}
                  placeholder="请选择服务类型"
                  value={type || undefined}
                  onChange={ev => {
                    this.setState({ type: ev , showDiv: ev==='externalApi'});
                    handleChangeProperties(
                      "serviceConf",
                      { ...serviceConf, type: ev },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                >
                  <Option value="externalApi">外部接口</Option>
                  <Option value="javaDelegate">javaDelegate</Option>
                  <Option value="delegateExpression">delegation object</Option>
                  <Option value="expression">
                    javeBean调用方法表达式(Expression)
                  </Option>
                </Select>
              </div>
              <div style={{ marginBottom: "12px" ,display: showDiv ?'none':'block'}}>
                <div style={{ marginBottom: "12px" }}>表达式：</div>
                <TextArea
                  disabled={disable}
                  style={{ width: "100%" }}
                  placeholder="请输入表达式"
                  value={expression}
                  onChange={ev =>
                    this.setState({ expression: ev.target.value })
                  }
                  onBlur={ev => {
                    handleChangeProperties(
                      "serviceConf",
                      { ...serviceConf, expression: ev.target.value },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
              <div style={{ marginBottom: "12px", display:showDiv ?'block':'none'}}>
                <div style={{ marginBottom: "12px" }}>外部接口地址（仅支持post）：</div>
                <TextArea
                  disabled={disable}
                  style={{ width: "100%" }}
                  placeholder="请输入URL"
                  value={requestUrl}
                  onChange={ev =>
                    this.setState({ requestUrl: ev.target.value })
                  }
                  onBlur={ev => {
                    handleChangeProperties(
                      "serviceConf",
                      { ...serviceConf, requestUrl: ev.target.value },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
                <div style={{ marginBottom: "12px" }}>requestBody：</div>
                <TextArea
                  disabled={disable}
                  style={{ width: "100%" }}
                  placeholder='{ &#13;&#10;
                    "流程实例Id":"${_processInstanceId}",&#13;&#10;
                    "发起人Id":"${_applyUserId}" &#13;&#10;
                  }'
                  value={requestBody}
                  onChange={ev =>
                    this.setState({ requestBody: ev.target.value })
                  }
                  onBlur={ev => {
                    handleChangeProperties(
                      "serviceConf",
                      { ...serviceConf, requestBody: ev.target.value },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
              <div style={{ marginBottom: "12px" }}>
                <div style={{ marginBottom: "12px" }}>结果变量：</div>
                <TextArea
                  disabled={disable}
                  style={{ width: "100%" }}
                  placeholder="请输入结果变量"
                  value={resultVariable}
                  onChange={ev =>
                    this.setState({ resultVariable: ev.target.value })
                  }
                  onBlur={ev => {
                    this.setState({ resultVariable: ev.target.value });
                    handleChangeProperties(
                      "serviceConf",
                      { ...serviceConf, resultVariable: ev.target.value },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
              <div style={{ marginBottom: "12px" }}>
                <div style={{ marginBottom: "12px" }}>作业失败重试时间周期：</div>
                <Input
                  disabled={disable}
                  value={failedJobRetryTimeCycleValue}
                  onChange={ev =>
                    this.setState({
                      failedJobRetryTimeCycleValue: ev.target.value,
                    })
                  }
                  onBlur={ev => {
                    this.setState({
                      failedJobRetryTimeCycleValue: ev.target.value,
                    });
                    handleChangeProperties(
                      "serviceConf",
                      {
                        ...serviceConf,
                        failedJobRetryTimeCycleValue: ev.target.value,
                      },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
            </TabPane>
          </Tabs>
        </div>
      </>
    );
  }
}
export default ServiceTaskDetail;
